<!-- 进出统计 -->
<template>
  <div class="container">
    <div style="width: 100%; height: 30vh" ref="echarts4"></div>
    <statDatePicker @search="search"></statDatePicker>

    <el-table :data="tableData" height="30vh" border style="width: 100%">
      <el-table-column prop="date" :label="tableFirstTitle" width="180"> </el-table-column>
      <el-table-column prop="outLabelNum" label="出库标签数"> </el-table-column>
      <el-table-column prop="inLabelNum" label="入库标签数"> </el-table-column>
      <el-table-column prop="illegalNum" label="违规标签数"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { entryAndExitStatistics } from '@/api/rfid/board'
import statDatePicker from '@/components/statDatePicker.vue'
import moment from 'moment/moment'

export default {
  name: 'InOutStat',
  props: {
    activeName: {
      type: String,
      default: 'first',
    },
  },
  components: { statDatePicker },
  data() {
    return {
      formInline: {
        user: '',
        region: '',
      },
      chart: null,
      tableFirstTitle: '年份',
      xyAxisData: {},
      tableData: [],
    }
  },
  computed: {},
  watch: {
    activeName(newVal) {
      if (newVal === 'fourth') {
        this.resizeChart()
      }
    },
  },
  created() {},
  mounted() {
    window.addEventListener('resize', () => {
      this.resizeChart()
    })
    this.searchData = {
      type: 'year',
      startDate: moment().subtract(1, 'years').format('YYYY-01-01 00:00:00'),
      endDate: moment().format('YYYY-MM-DD 23:59:59'), //当前的月份
    }
    this.getData(this.searchData)
    this.initEcharts()
  },
  methods: {
    // 处理xy轴的数据
    handleXYData(data) {
      let obj = {}

      data.forEach((item, index) => {
        Object.keys(item).forEach((key) => {
          if (!obj[key]) {
            obj[key] = []
          }
          obj[key][index] = item[key]
        })
      })
      return obj
    },
    search(data) {
      if (data.type == 'year') {
        this.tableFirstTitle = '年份'
      } else if (data.type == 'month') {
        this.tableFirstTitle = '月份'
      } else if (data.type == 'day') {
        this.tableFirstTitle = '日期'
      }
      this.getData(data)
    },
    getData(param) {
      entryAndExitStatistics(param).then((res) => {
        if (res.data.code === 200) {
          this.xyAxisData = []
          this.tableData = res.data.data
          this.xyAxisData = this.handleXYData(res.data.data)
          this.initEcharts()
        } else {
          this.tableData = []
          this.$message.error(res.data.message)
        }
      })
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    disposeChart() {
      if (this.chart) {
        this.chart.dispose()
        this.chart = null
      }
    },
    initEcharts() {
      this.chart = echarts.init(this.$refs.echarts4)
      var option
      option = {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['入库标签数', '出库标签数', '违规标签数'],
        },
        toolbox: {
          right: 10,
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xyAxisData.date,
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
        },
        dataZoom: [
          {
            startValue: moment().format('YYYY/MM/DD'),
          },
          {
            type: 'inside',
          },
        ],
        series: [
          {
            name: '入库标签数',
            type: 'line',
            data: this.xyAxisData.inLabelNum,
          },
          {
            name: '出库标签数',
            type: 'line',
            data: this.xyAxisData.outLabelNum,
          },
          {
            name: '违规标签数',
            type: 'line',
            data: this.xyAxisData.illegalNum,
          },
        ],
      }

      option && this.chart.setOption(option)
    },
  },
  beforeDestroy() {
    this.disposeChart()
  },
}
</script>
<style lang="less" scoped></style>
